<template>
  <div class="ele-body ele-body-card" v-loading="fullscreenLoading">
    <el-row :gutter="15" v-if="name">
      <el-col :span="24" style="text-align: left;font-size:24px;margin-bottom: 20px">{{name}}</el-col>
    </el-row>
    <!-- 顶部筛选 -->
    <el-row :gutter="15">
      <el-form ref="schoolForm" :inline="true" :model="schoolForm" label-width="80px">
        <el-form-item label="统计年度">
          <el-select
            filterable
            clearable
            v-model="schoolForm.niandu"
            @change="getAllData"
            size="small"
            placeholder="-学年统计-"
            class="ele-block">
            <el-option v-for="item in xuenianList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="统计日期">
          <el-col :span="24">
            <el-date-picker
              v-model="schoolForm.start_end"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chooseDate"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="年级">
          <el-select
            filterable
            clearable
            v-model="schoolForm.gradeId"
            size="small"
            @change="getAllData"
            placeholder="-请选择年级-"
            class="ele-fluid">
            <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="院系类型">
          <el-select
            clearable
            v-model="schoolForm.type"
            placeholder="请选择院系类型"
            @change="getDepartmentsList"
            class="ele-fluid">
            <el-option label="自然院系" value="1"/>
            <el-option label="体育院系" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="模式">
          <el-select v-model="schoolForm.model" placeholder="请选择模式" @change="getAllData">
            <el-option label="全部模式" value="0"></el-option>
            <el-option label="测试模式" value="1"></el-option>
            <el-option label="训练模式" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 顶部四个卡片 -->
    <el-row :gutter="15">
      <el-col :lg="6" :md="12">
        <el-card class="analysis-chart-card" style="background: #02AFFF;border-radius: 10px" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
            <div >学校总人数</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;">
            <span>男生</span>
            <span>女生</span>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
            <span>{{analysisData.man_num}}</span>
            <span>{{ analysisData.women_num }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12">
        <el-card class="analysis-chart-card" style="background: #847FFF;border-radius: 10px" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/canyurenshu.png" alt="" class="el-icon-dash">
            <div >参与体测人数</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;">
            <span>参与人数</span>
            <span>参与率</span>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
            <span>{{analysisData.canyu_num}}</span>
            <span>{{ analysisData.canyu_rate }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12">
        <el-card class="analysis-chart-card" style="background: #00CFDE;border-radius: 10px" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/canyurenshu.png" alt="" class="el-icon-dash">
            <div >体测合格率</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;">
            <span>合格人数</span>
            <span>合格率</span>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
            <span>{{ analysisData.hege_num }}</span>
            <span>{{ analysisData.hege_rate }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12">
        <el-card class="analysis-chart-card" style="background: #FF9E00;border-radius: 10px" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/canyurenshu.png" alt="" class="el-icon-dash">
            <div >体测平均分</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 12px;">
            <span>平均分</span>
            <span>最高分{{ analysisData.max_avg }}</span>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
            <span>{{ analysisData.avg_num }}</span>
            <span>最低分{{ analysisData.mix_avg }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 一行 -->
    <el-row :gutter="15">
      <el-col :lg="12" :md="12">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visitschoolChart"
            style="height: 323px;"
            :option="xueYuanChartOption"/>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12">
        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visitHegelvChart"
            style="height: 323px;"
            :option="hegulvChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 二行 各项目参与率-->
    <el-row :gutter="15">
      <el-col :lg="12" :md="12">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 30px;">
              <el-form-item label="院系">
                <el-select
                  filterable
                  clearable
                  v-model="canyulvDepartmentsId"
                  size="small"
                  placeholder="-请选择院系-"
                  @change="changeYuanxi($event,'canyulv')"
                  class="ele-fluid">
                  <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visitxiangmucanyulvChart"
            style="height: 323px;"
            :option="xiangmuCYLChartOption"/>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12">
        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 30px;">
              <el-form-item label="院系">
                <el-select
                  filterable
                  clearable
                  v-model="yundongDepartmentsId"
                  size="small"
                  placeholder="-请选择院系-"
                  @change="changeYuanxi($event,'yundong')"
                  class="ele-fluid">
                  <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visityundongChart"
            style="height: 323px;"
            :option="yundongSCChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 三行 各院系平均分-->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visitpingjufenChart"
            style="height: 323px;"
            :option="yuanxiPJChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 四行 身高体重bim-->
    <el-row :gutter="15">
      <el-col :lg="18" :md="16" style="padding-right: 0!important;border-top-right-radius: 0!important;border-bottom-right-radius: 0!important;">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visittizhongChart"
            style="height: 323px;"
            :option="shengaoChartOption"/>
        </el-card>
      </el-col>
      <el-col  :lg="6" :md="8" style="padding-left: 0!important;border-top-left-radius: 0!important;border-bottom-left-radius: 0!important;">

        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center">

          <div style="width: 100%;display: flex;justify-content: flex-end">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="院系">
                <el-select
                  filterable
                  clearable
                  v-model="tizhongDepartmentsId"
                  size="small"
                  placeholder="-请选择院系-"
                  @change="changeYuanxi($event,'tizhong')"
                  class="ele-fluid">
                  <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div style="width: 100%;display: flex;justify-content: center;margin-top: 5px">
            <el-button-group style="height: 40px;">
              <el-button :type="isall=='0'?'primary':''" size="small" @click="changenannv('0')">全部</el-button>
              <el-button :type="isall=='1'?'primary':''" size="small" @click="changenannv('1')">男生</el-button>
              <el-button :type="isall=='2'?'primary':''" size="small" @click="changenannv('2')">女生</el-button>
            </el-button-group>
          </div>
          <ele-chart
            ref="visittizhongpieChart"
            style="height: calc(238px);"
            :option="shengaopie"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 五行 各院系项目等级-->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visitdengjiChart"
            style="height: 323px;"
            :option="yuanxiXMDJChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 六行 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="院系">
                <el-select
                  filterable
                  clearable
                  v-model="manDepartmentsId"
                  size="small"
                  placeholder="-请选择院系-"
                  @change="changeYuanxi($event,'man')"
                  class="ele-fluid">
                  <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visitmanChart"
            style="height: 323px;"
            :option="manClassScoreData"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 七行 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="院系">
                <el-select
                  filterable
                  clearable
                  v-model="womanDepartmentsId"
                  size="small"
                  placeholder="-请选择院系-"
                  @change="changeYuanxi($event,'woman')"
                  class="ele-fluid">
                  <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visitwomanChart"
            style="height: 323px;"
            :option="womanClassScoreData"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';

export default {
  name: 'DashboardAnalysis',
  components: {EleChart},
  data() {
    return {
      xuenianList:[],
      id:'',
      name:'',
      isall:'0',
      // 支付笔数
      payNumData: [],
      // 身高院系搜索
      formYuanxi: {
        yuanxi: ''
      },
      //各院系成绩合格率
      duiBarChartOption:[],
      // 学院
      xueYuanData:[],
      // 销售量数据
      saleroomData: [],
      // 销售量排名数据
      saleroomRankData: [],
      // 最近1小时访问情况数据
      visitHourData: [],
      // 词云数据
      hotSearchData: [],
      schoolForm:{
        gradeId:'',
        niandu: '',
        type: '',
        begin: '',
        end: '',
        start_end:[],
        model:''
      },
      labelOption :{
        show: true,
        position: 'inside',
        formatter: '{c}%',
        color:'#fff',
        rotate: 90
      },
      // 年级列表
      gradeList: [],
      // 大屏预览总数据
      analysisData:{},
      //   合格率
      hegelvDataX:[],
      hegelvData:[],
      canyulvX:[],
      canyulvData:[],
      departmentsList:[],
      canyulvDepartmentsId:'',
      canyulvDepartments:'',
      yundongDepartmentsId:'',
      yundongDepartments:'',
      // 男生女生平均
      manDepartmentsId:'',
      manDepartments:'',
      womanDepartmentsId:'',
      womanDepartments:'',
      //身高体重
      tizhongDepartmentsId:'',
      tizhongDepartments:'',
      //运动时长
      yundongshichangData:[],
      //  各院系平均分
      yuanxi_avgsData:[],
      //   各项目等级
      project_levelData:[],
      //男生女生平均
      man_levelProjectData:[],
      man_levelProjectX:[],
      woman_levelProjectData:[],
      woman_levelProjectX:[],
      //身高体重
      high_weightWdata:[],
      high_weightHdata:[],
      high_weightX:[],
      weightData:[],
      weightDataX:[],
      weightManData:[],
      weightWomanData:[],
      fullscreenLoading:false
    };
  },
  computed: {
    // 学院
    xueYuanChartOption() {
      /*if (!this.visitHourData.length) {
        return {};
      }*/
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title: {
          text: '学院'
        },
        grid:{
          top:'15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
       tooltip: {
          trigger: 'axis',
	       formatter(params) {
		        let val0 = params[0]["value"];
		        let val1 = params[1]["value"];
		        let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
		        let data0 = `${circle}#00BFFF"></span> ${
			        params[0]["seriesName"]
		        }: ${val0}%`;
		        let data1 = `${circle}#00EE76"></span> ${
			        params[1]["seriesName"]
		        }: ${val1}%`;
		        return `${params[0].axisValueLabel}<br/>${data0}<br/>${data1}`;
	        }
        },
        legend: {
          data: ['参与时长', '参与率'],

        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.xueYuanData.map(d => d.time),
            axisLabel:{
              fontSize:12,
              interval: 0,
              rotate: 30
            },
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '参与时长',
            type: 'line',
            smooth: true,

            areaStyle: {
              opacity: 0.5
            },
            data: this.xueYuanData.map(d => d.views),
            label: {
              show: true,
              position: 'top',
              color:"#00BFFF",
	            formatter: '{c}%'
            }
          },
          {
            name: '参与率',
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.5
            },
            data: this.xueYuanData.map(d => d.visits),
            label: {
              show: true,
              position: 'top',
              color:"#00EE76",
	            formatter: '{c}%'
			}
          }
        ]
      }
    },
    // 学院合格率
    hegulvChartOption() {
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title: {
          text: '各院系成绩合格率'
        },
	      color:['#00BFFF',"#00EE76","#f1be17","#0beedb"],
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color = ['#00BFFF',"#00EE76","#f1be17","#0beedb"];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val}%`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        legend: {},
        grid: {
          top:'15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.hegelvDataX,
            axisLine: {
              lineStyle: { color: '', width:0, height: 1 } // x轴
            },
            axisLabel:{
              fontSize:12,
              interval: 0,
              rotate: 30
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
          }
        ],
        series:this.hegelvData
      }
    },
    //   项目参与率
    xiangmuCYLChartOption(){
      return {
        title: {
          text: '项目参与率'
        },
        color:["#00BFFF"],
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color = ['#00BFFF'];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val}%`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        itemStyle: {
          opacity: 0.7,
          borderRadius:10,
          margin:10,
        },
        legend: {},
        grid: {
          top:'15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data:this.canyulvX
        },series: [
          {
            name: this.canyulvDepartments?this.canyulvDepartments:'全部',
            type: 'bar',
            data: this.canyulvData,
            barWidth:10,
            label: {
              show: true,
              position: 'right',
              color:"#00BFFF",
	          formatter: '{c}%'
          }
          }
        ]
      };
    },
    //运动时长
    yundongSCChartOption() {
      /*if (!this.visitHourData.length) {
        return {};
      }*/
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title: {
          text: '运动时长'
        },
        grid:{
          top:'18%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color = ['#00BFFF',"#00EE76"];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val}h`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        legend: {
          data: ['男生', '女生']
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.yundongshichangData.map(d => d.time),
            axisLabel:{
              fontSize:12,
              interval: 0,
              rotate: 30
            },
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '男生',
            type: 'line',
            smooth: false,
            areaStyle: {
              opacity: 0.5
            },
            data: this.yundongshichangData.map(d => d.views),
            label: {
              show: true,
              position: 'top',
              color:"#00BFFF",
	            formatter: '{c}h'
            }
          },
          {
            name: '女生',
            type: 'line',
            smooth: false,
            areaStyle: {
              opacity: 0.5
            },
            data: this.yundongshichangData.map(d => d.visits),
            label: {
              show: true,
              position: 'top',
              color:"#00EE76",
	            formatter: '{c}h'
          }
          }
        ]
      }
    },
    //各院系平均分
    yuanxiPJChartOption(){
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title:{
          text:'各院系运动人数'
        },
        grid: {
          top:'15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {},
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color =['#ff0230','#26ee5e','#00BFFF'];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val[index+1]}分`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        color:['#ff0230','#26ee5e','#00BFFF'],
        dataset: {
          source: this.yuanxi_avgsData
        },
        xAxis: {
          type: 'category',
          axisLabel:{
            fontSize:12,
            interval: 0,
            rotate: 30
          },
        },
        yAxis: { gridIndex: 0 },
        series: [
          {
            type: 'line',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color:'#ff0230',
	            
            },
          },
          {
            type: 'line',
            label: {
              show: true,
              position: 'top',
              color:'#26ee5e',
	            
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color:'#00BFFF',
	            
            },
          }
        ]
      }
    },
    //   各院系项目等级
    yuanxiXMDJChartOption(){
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title:{
          text:'各院系项目等级'
        },
        grid: {
          top:'15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {},
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color =['#26ee5e','#36c9f6','#f1be17','#ff0230'];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val[index+1]}分`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        color:['#26ee5e','#36c9f6','#f1be17','#ff0230'],
        dataset: {
          source:this.project_levelData
        },
        xAxis: { type: 'category',
          axisLabel:{
            fontSize:12,
            interval: 0,
            rotate: 30
          },},
        yAxis: { gridIndex: 0 },
        series: [
          {
            type: 'line',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color:'#26ee5e',
	        
            },
          },
          {
            type: 'line',
            label: {
              show: true,
              position: 'top',
              color:'#36c9f6',
	            
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color:'#f1be17',
	            
            },
          },
          {
            type: 'line',
            label: {
              show: true,
              position: 'top',
              color:'#ff0230',
	            
            },
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          }
        ]
      }
    },
    //身高体重bim
    shengaoChartOption(){
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title:{
          text:'身高体重BMI'
        },
        color:["#00BFFF","#00EE76"],
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color =["#00BFFF","#00EE76"];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val}${index=='0'?'cm':'kg'}`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        grid:{
          top:'18%',
          x2:50,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['身高', '体重']
        },
        xAxis: [
          {
            type: 'category',
            data: this.high_weightX,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel:{
              fontSize:12,
              interval: 0,
              rotate: 30
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '身高',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} cm'
            }
          },
          {
            type: 'value',
            name: '体重',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} kg'
            }
          }
        ],
        series: [
          {
            name: '身高',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' cm';
              }
            },
            barWidth: 8,
            data:this.high_weightHdata,
            label: {
              show: true,
              position: 'top',
              color:"#00BFFF",
	            formatter: '{c}cm'
            }
          },
          {
            name: '体重',
            type: 'bar',
            barWidth: 8,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' cm';
              }
            },
            data:this.high_weightWdata,
            label: {
              show: true,
              position: 'top',
              color:"#00EE76",
	            formatter: '{c}kg'
          }
          }
        ]
      }
    },
    shengaopie(){
      return {
        grid:{
          top:'-6%'
        },
        legend: {
          orient: 'vertical',
          x: 'right',               // 水平安放位置，默认为全图居中，可选为：
          y: '10%',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 20,             // 图例图形宽度
          itemHeight: 14,            // 图例图形高度
          textStyle: {
            color: '#333'    // 图例文字颜色
          },
          data:this.weightDataX
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['50%', '50%'],
            roseType: 'radius',
	          label: {
		          alignTo: 'labelLine',
		          formatter: `{name|{b}}\n\n{c}%`,
		          minMargin: 1,
		          edgeDistance: 4,
		          lineHeight: 8,
		          rich: {
			          name: {
				          fontSize: 14,
				          marginBottom:12
			          },
		          }
	          },
	          labelLine: {
		          length:10,
		          length2: 0,
		          maxSurfaceAngle: 80
	          },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.isall == '0'?this.weightData:(this.isall=='1'?this.weightManData:this.weightWomanData),
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,

          }
        ]
      }
    },
    //  男生各项目平均分与等级
    manClassScoreData(){
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title: {
          text: '男生各项目平均分与等级'
        },
	      color:['#00BFFF',"#00EE76","#f1be17"],
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color = ['#00BFFF',"#00EE76","#f1be17"];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val}${index=='0'?'分':'%'}`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        grid:{
          top:'22%',
          x2:50,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['分数', '合格率', '优良率']
        },
        xAxis: [
          {
            type: 'category',
            data: this.man_levelProjectX,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel:{
              fontSize:12,
              interval: 0,
              rotate: 30
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '分数',
            min: 0,
            axisLabel: {
              formatter: '{value} 分'
            }
          },
          {
            type: 'value',
            name: '比率',
            min: 0,
            max: 100,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '分数',
            type: 'bar',
           
            barWidth:20,
            data: this.man_levelProjectData[0],
            label: {
              show: true,
              position: 'top',
              color:"#00BFFF",
	            formatter: '{c}分'
            }
          },
          {
            name: '合格率',
            type: 'line',
            barWidth:20,
           
            data: this.man_levelProjectData[1],
            label: {
              show: true,
              position: 'top',
              color:"#00EE76",
	            formatter: '{c}%'
            }
          },
          {
            name: '优良率',
            type: 'line',
            yAxisIndex: 1,
           
            data:this.man_levelProjectData[2],
            label: {
              show: true,
              position: 'top',
              color:"#FFC125",
	            formatter: '{c}%'
          }
          }
        ]
      };
    },
    //   女生各项目平均分与等级
    womanClassScoreData(){
      return {
        dataZoom: {
          // 开启数据平移
          type: 'slider', // 滑动条单独显示
          show: true, // 是否显示滑动条
          startValue: 0, // 展示区域内容的起始数值
          endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
          height: 10, // 滑动条组件高度
          bottom: 0, // 距离图表区域下边的距离
          showDetail: false, // 拖拽时是否显示详情
          showDataShadow: false,
          fillerColor: '#cfedfc', // 平移条的填充颜色
          borderColor: 'transparent', // 边框颜色
          zoomLock: true, // 锁定视图
          brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
          // 通过该属性可以只滑动，不显示缩放功能
          handleStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          textStyle: {
            fontSize: 0,
          },
        },
        title: {
          text: '女生各项目平均分与等级'
        },
	      tooltip: {
		      axisPointer: {
			      type: 'shadow'
		      },
		      trigger: 'axis',
		      formatter(params) {
			      console.log("====params",params)
			      let color = ['#00BFFF',"#00EE76","#f1be17"];
			      let newList = ``;
			      params.forEach((item,index)=>{
				      let val = item["value"];
				      let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
				      let data = `${circle}${color[index]}"></span> ${
					      item["seriesName"]
				      }: ${val}${index=='0'?'分':'%'}`;
				      newList = newList + `<br/>${data}`
			      })
			      return `${params[0].axisValueLabel}<br/>${newList}`;
		      }
	      },
        grid:{
          top:'22%',
          x2:50,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color:["#00BFFF","#00EE76","#FFC125"],
        legend: {
          data: ['分数', '合格率', '优良率']
        },
        xAxis: [
          {
            type: 'category',
            data: this.woman_levelProjectX,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel:{
              fontSize:12,
              interval: 0,
              rotate: 30
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '分数',
            min: 0,
            axisLabel: {
              formatter: '{value} 分'
            }
          },
          {
            type: 'value',
            name: '比率',
            min: 0,
            max: 100,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '分数',
            type: 'bar',
           
            barWidth:20,
            data: this.woman_levelProjectData[0],
            label: {
              show: true,
              position: 'top',
              color:"#00BFFF",
	            formatter: '{c}分'
            }
          },
          {
            name: '合格率',
            type: 'line',
            barWidth:20,
           
            data: this.woman_levelProjectData[1],
            label: {
              show: true,
              position: 'top',
              color:"#00EE76",
	            formatter: '{c}%'
            }
          },
          {
            name: '优良率',
            type: 'line',
            yAxisIndex: 1,
            data:this.woman_levelProjectData[2],
            label: {
              show: true,
              position: 'top',
              color:"#FFC125",
	            formatter: '{c}%'
          }
          }
        ]
      };
    }

  },
  mounted() {
    this.getGradeList();
    this.getDepartmentsList();
    this.getXueList();
    this.getAllData();
  },
  created(){
    this.departmentsId = this.$route.query.id
    this.name = this.$route.query.name
  },
  methods: {
    getXueList() {
      this.$http.get('/annual/getXueList').then(res => {
        if (res.data.code === 0) {
          this.xuenianList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    changenannv(type){
      this.isall = type;
    },
    /**
     * 图表选择院系
     * **/
    changeYuanxi(e,type){
      switch (type) {
        case 'canyulv':
          console.log("====",e)
          this.canyulvDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.canyulvDepartments = item.name
            }
          })
          this.$refs.visitxiangmucanyulvChart.resize();
          this.getAllData();
          break;
        case 'yundong':
          console.log("====",e)
          this.yundongDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.yundongDepartments = item.name
            }
          })
          this.$refs.visityundongChart.resize();
          this.getAllData();
          break;
        case 'man':
          console.log("====",e)
          this.manDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.manDepartments = item.name
            }
          })
          this.$refs.visitmanChart.resize();
          this.getAllData();
          break;
        case 'woman':
          console.log("====",e)
          this.womanDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.womanDepartments = item.name
            }
          })
          this.$refs.visitwomanChart.resize();
          this.getAllData();
          break;
        case 'tizhong':
          console.log("====",e)
          this.tizhongDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.tizhongDepartments = item.name
            }
          })
          this.$refs.visittizhongChart.resize();
          this.$refs.visittizhongpieChart.resize();
          this.getAllData();
          break;

        default:
          break
      }
    },
    /**
     * 获取年级列表
     */
    getGradeList() {
      this.$http.post('/grade/getGradesList').then(res => {
        if (res.data.code === 0) {
          this.gradeList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取院系列表
     */
    getDepartmentsList() {
      this.getAllData();
      this.$http.post('/departments/getDepartmentsList', {type: this.schoolForm.type}).then(res => {
        if (res.data.code === 0) {
          this.departmentsList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 选择日期
     */
    chooseDate(e){
      console.log("====1",e)
      this.schoolForm.begin = e[0];
      this.schoolForm.end = e[1];
      this.getAllData();
    },
    /* 学院 */
    getxueYuanData() {
      this.xueYuanData = this.analysisData.xueyuan;
      this.yundongshichangData = this.analysisData.yundongshichang;
      this.yuanxi_avgsData = this.analysisData.yuanxi_avgs;
      this.project_levelData = this.analysisData.project_level;
      this.man_levelProjectData = this.analysisData.man_level.data;
      this.woman_levelProjectData = this.analysisData.woman_level.data;
      this.man_levelProjectX = this.analysisData.man_level.project;
      this.woman_levelProjectX = this.analysisData.woman_level.project;
      this.high_weightWdata = this.analysisData.high_weight.weight;
      this.high_weightHdata = this.analysisData.high_weight.high;
      this.high_weightX = this.analysisData.high_weight.xueyuan;
      let arr = [];
      let arrx = [];
      this.analysisData.weight.map((item)=>{
        let obj = {
          "value": item.value,
          "name": item.name,
          itemStyle: {
            opacity: 0.7,
            margin:10,
            borderRadius: 15
          }
        }
        arr.push(obj)
        arrx.push(obj.name)
      });
      let arr2 = []
      this.analysisData.weight_man.map((item)=>{
        let obj = {
          "value": item.value,
          "name": item.name,
          itemStyle: {
            opacity: 0.7,
            margin:10,
            borderRadius: 15
          }
        }
        arr2.push(obj)
      });
      let arr3 = []
      this.analysisData.weight_woman.map((item)=>{
        let obj = {
          "value": item.value,
          "name": item.name,
          itemStyle: {
            opacity: 0.7,
            margin:10,
            borderRadius: 15
          }
        }
        arr3.push(obj)
      });
      this.weightData = arr;
      this.weightManData = arr2;
      this.weightWomanData = arr3;
      this.weightDataX = arrx;
    },
    /**
     * 处理合格率数据
     * **/
    gethegelvData(){
      this.analysisData.hegelv.series.map(item=>{
        item.label = this.labelOption
        let data = []
        item.data.map(items=>{
          data.push(Number(items.slice(0,items.length-1)));
        })
        item.data = data;
      })
      this.hegelvDataX = this.analysisData.hegelv.data
      this.hegelvData = this.analysisData.hegelv.series
      console.log(this.hegelvData)
    },
    /**
     * 获取项目参与率
     * **/
    getxiangmucanyuLv(){
      this.canyulvX = this.analysisData.canyulv.data;
      this.canyulvData = this.analysisData.canyulv.yzhou;
    },
    /* 获取基本的chart 数据 */
    getAllData(){
      let params = {
        ...this.schoolForm,
        canyulv:this.canyulvDepartmentsId,
        yundongshichang:this.yundongDepartmentsId,
        high_weight:this.tizhongDepartmentsId,
        man_level:this.manDepartmentsId,
        woman_level:this.womanDepartmentsId,
        departmentsId:this.departmentsId,
        professionalId:this.professionalId
      }
      this.fullscreenLoading = true;
      this.$http.post('/data/school',params).then(res => {
        if (res.data.code === 0) {
          this.analysisData = res.data.data;
          //   获取学院数据
          this.getxueYuanData();
          // 获取合格率数据
          this.gethegelvData();
          //   获取项目参与率数据
          this.getxiangmucanyuLv();
        } else {
          this.$message.error(res.data.msg);
        }
        this.fullscreenLoading = false;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  },
  activated() {
    ['visitschoolChart','visitHegelvChart','visityundongChart','visitpingjufenChart','visitdengjiChart','visitwomanChart','visitmanChart','visittizhongChart', 'visittizhongpieChart'].forEach((name) => {
      this.$refs[name].resize();
    });
  }
}
</script>

<style scoped lang="less">
/* 统计卡片4个 */
.analysis-chart-card-head{
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 8px;
  .el-icon-dash{
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}
/* 统计卡片 */
.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &:first-child{
    margin-bottom: 6px;
  }
  span{
    display: inline-block;
    width: 45%;
  }
}

.analysis-chart-card-text {
  padding-top: 12px;
}

/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
  display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
  width: 256px;
  margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
</style>
